<template>
  <div id="myEchart" class="myEchart">
    <div class="chartBox" :ref="containerId" :id="containerId"></div>
  </div>
</template>
<script>
var ECharts = require("echarts/lib/echarts"); //基础实例 注意不要使用import

require("echarts/lib/component/tooltip"); //引入提示框
require("echarts/lib/component/title");  //引入标题
require("echarts/lib/component/legend");  //引入图例标识
require("echarts/lib/component/grid");  //引入画布网格线

/**
 * @author QL
 * @date 2022-01-06 09:34:26
 * @version V..
 * @description 按需引入，到node_modules中找到 echarts/lib/chart 文件夹下找到相应图表类型的文件夹引入 
 */
require("echarts/lib/chart/bar"); //按需引入 bar = 柱状图
require("echarts/lib/chart/line"); //按需引入 line = 折线图
require("echarts/lib/chart/pie"); //按需引入 pie = 饼状图

import { mapGetters, mapMutations } from "vuex";

export default {
  name: "ocn-echart",
  props: {
    containerId: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      chart: null, // 初始化图表实例的载体变量
    };
  },
  computed: {
    ...mapGetters("echartsOperation", [
      "getterChartOption",
      "getterContainers",
    ]),
  },
  created() {},
  mounted() {
    this.initChart();
  },
  methods: {
    ...mapMutations("echartsOperation", ["setterContainers"]),
    /**
     * @author QL
     * @functionName initChart
     * @date 2021-12-31 16:34:11
     * @version V..
     * @description 利用Echart的init()方法初始化图表实例, refs为ref属性对应的视图容器
     */
    initChart() {
      // 1. 初始化Echarts实例
      this.chart = ECharts.init(document.getElementById(this.containerId));

      /**
       * @author QL
       * @date 2022-01-04 14:01:41
       * @version V..
       * @description 调取setter方法，将当前图表容器对象存入vuex State
       */
      this.setterContainers({
        valueName: this.containerId,
        valueVal: this.chart,
        fn: (obj) => {
          this.$utils.setConsole("set操作同步回调---:", obj);
        },
      });

      // 2. 为实例设置数据配置对象，使图表渲染数据图
      this.chart.setOption(this.getterChartOption(this.containerId));

      // 3. 利用图表实例的resize方法，添加窗口reszie监听，触发图表resize方法
      window.addEventListener("resize", () => {
        this.chart.resize();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.myEchart {
  width: 100%;
  height: 100%;
  /* stretch 属性标识按照对称轴垂直方向沾满容器 前提是容器没有设置对称轴垂直方向的距离属性 width/height*/
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.chartBox {
  width: 99%;
  height: 100%;
}
</style>